/**
 * 覆盖 table header 元素
 * @param {列描述数据对象} columns 
 */
export const components = (columns) => {
    const draggingMap = {};
    columns.forEach(col => {
        draggingMap[col.key] = col.width;
    });
    console.log("columns.length", columns.length)
    return {

        header: {
            cell: (h, props, children) => {
                const { key, ...restProps } = props
                const col = columns.find(col => {
                    const k = col.dataIndex || col.key
                    return k === key
                })

                if (!col || !col.width) {
                    return h('th', { ...restProps }, [...children])
                }

                const dragProps = {
                    key: col.dataIndex || col.key,
                    class: 'table-draggable-handle',
                    attrs: {
                        w: 10,
                        x: col.width,
                        z: 1,
                        axis: 'x',
                        draggable: true,
                        resizable: false,
                    },
                    on: {
                        dragging: (x, y) => {
                            col.width = Math.max(x, draggingMap[key] / 3)
                            // col.width = Math.max(x, 1  )
                        },
                    }
                }
                const drag = h('vue-draggable-resizable', { ...dragProps })

                return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
            }
        }
    }
}



/**
 * 控制列的宽度
 * @param {*} Id 
 */
export const Controlwidth = (Id, minWidth) => {
    if (!minWidth) minWidth = 30;
    let tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
    let index;   //记录推动单元格的下标
    if (!document.getElementById(Id)) {
        return;
    }
    // let antTable = document.getElementById(Id).getElementsByClassName("ant-table-fixed");
    let antTable = document.getElementById(Id).getElementsByTagName("table");
    let table = antTable[0];
    if (!table.rows[0]) {
        return;
    }
    for (let j = 0; j < table.rows[0].cells.length; j++) {
        table.rows[0].cells[j].onmousedown = function () {
            //记录单元格
            tTD = this;
            index = j;
            if (event.offsetX > tTD.offsetWidth - 10) {
                tTD.mouseDown = true;
                tTD.oldX = event.x;
                tTD.oldWidth = tTD.offsetWidth;
            }
            //记录Table宽度
            //table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;
            //tTD.tableWidth = table.offsetWidth;
        };
        table.rows[0].cells[j].onmouseup = function () {
            //结束宽度调整
            // if (tTD === undefined) tTD = this;
            if (tTD) {
                tTD.mouseDown = false;
                tTD.style.cursor = 'default';
            }

        };
        table.rows[0].cells[j].onmousemove = function () {
            //更改鼠标样式
            if (event.offsetX > this.offsetWidth - 10)
                this.style.cursor = 'col-resize';
            else
                this.style.cursor = 'default';
            //取出暂存的Table Cell
            // if (tTD === undefined) tTD = this;
            if (!tTD) return false;
            //调整宽度
            if (tTD.mouseDown != null && tTD.mouseDown === true) {
                tTD.style.cursor = 'default';
                if (tTD.oldWidth + (event.x - tTD.oldX) > -1) {
                    let width = tTD.oldWidth + (event.x - tTD.oldX) + 1
                    width = Math.max(width, minWidth);
                    tTD.width = width;
                    /******* Ant-table *******/
                    if (index) {
                        for (let k = 0; k < antTable.length; k++) {
                            let tb = antTable[k];
                            let col = tb.firstChild.childNodes[index];
                            col.style.width = tTD.width + "px";
                            col.style.minWidth = tTD.width + "px";
                        }
                    }

                }
                //调整列宽
                tTD.style.width = tTD.width;
                tTD.style.cursor = 'col-resize';
            }
        };
    }
}